<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>Cindy JS</title>
      <script type="text/javascript" src="../build/js/Cindy.js"></script>
      <link rel="stylesheet" href="../css/cindy.css">
   </head>
   <body style="font-family:Arial;">
      <h1>CindyJS: imagergb3</h1>
      <script id='csmove' type='text/x-cindyscript'>
         drawimage(A, B, "rost");
         dim=imagesize("rost");
         p = linereflect(line([0,-2, dim_2]))*map(A, B, (0, 0), (dim_1, 0))*C.homog; //pixel-coordinates starting from upper left corner
         col = imagergb("rost", p_1/p_3, p_2/p_3);
         C.color = (col_1, col_2, col_3)/255;
         C.alpha = .5*col_4+.5;

         forall((0..dim_1/20)*20,i,
	         forall((0..dim_2/20)*20,j,
		         col = imagergb("rost",i,j);
		         draw((i,-j)*.03, color->(col_1,col_2,col_3)/255,
		         alpha->col_4) // border->false not supported yet
	         )
         );

         createimage("testcanvas", 100, 100);
         canvas(A, B, "testcanvas", fillcircle(A, |A,B|/2, alpha->0.5, color->(1,0,0)));
         drawimage(A, B, "testcanvas");
         p = linereflect(line([0,-2, 100]))*map(A, B, (0, 0), (100, 0))*D.homog; //pixel-coordinates starting from upper left corner
         col = imagergb("testcanvas", p_1/p_3, p_2/p_3);
         D.color = (col_1, col_2, col_3)/255;
         D.alpha = .5*col_4+.5;
      </script>
      <div  id="CSCanvas" style="width:500px; height:500px; border:2px solid #000000"></div>
      <script type="text/javascript">
         var gslp=[
                   {name:"A", kind:"P", type:"Free", pos:[-4,-8,1]},
                   {name:"B", kind:"P", type:"Free", pos:[4,-8,1]},
                   {name:"C", kind:"P", type:"Free", pos:[0,3,1],size:10},
         					 {name:"D", kind:"P", type:"Free", pos:[-3,-7,1],size:10}
                  ];

         CindyJS({canvasname:"CSCanvas",
                     movescript:"csmove",
                     geometry:gslp,
                     images:{rost:"rost.png"}
            });
      </script>
   </body>
</html>
